<template>
	<view class="card">
		<view class="title absolute">
			<text>您是否遇到过类似的问题</text>
		</view>
		
		<view class="list mt-30 mb-10 d-flex">
			<view v-for="(item, index) of list" :class="[index !== list.length - 1 ? 'mb-40' : '','list_item d-flex']" :key="index">
				<image src='/static/image/share/icon1.svg' class="list_item_icon mr-20" mode="widthFix"></image>
				
				<text class="list_item_title">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	const list = reactive([
		'想要提高助贷成功率，却苦于缺乏全面的信用评估？',
		'需要了解合作对象的真实背景，却找不到可靠的信息来源？',
		'希望拓展业务范围，但缺少有效的工具来支持决策？',
		'不知道如何相信即将要交易的对象？',
		'不知道如何信任一个陌生人？',
	])
</script>

<style scoped lang="scss">
.card {
	.list {
		flex-direction: column;
		&_item {
			align-items: center;
			
			&_title {
				font: {
					size: 22rpx
				}
			}
			
			&_icon {
				width: 34rpx;
			}
		}
	}
}
</style>
